const BASE_URL = 'http://localhost:3000'

// 获取列表(所有待办)
function getTodos() {
  // 发送ajax请求, 调用 GET /todos接口
  $.ajax({
    type: 'GET',
    url: `${BASE_URL}/todos`,
    success: function (res) {
      console.log(res)
      // 解构res对象
      const { code, message, result } = res
      if (code == 0) {
        // 清空ul中的数据
        $('.list ul').empty()
        // 成功, 遍历result(数组)
        result.forEach((item) => {
          // 在ul的后面添加li元素
          $('.list ul').append(`<li data-index="${item.id}">
                                  <p>${item.content}</p>
                                  <span>上次更新:${item.updated_time}</span>
                                  <a href="#">删除</a>
                                </li>`)
        })
      } else {
        alert(message)
      }
    },
  })
}

getTodos()

// 添加待办
// 一. 监听add这个input框的回车事件
// 1.1 判断input框架的内容为空, 提示"不能为空", 返回
// 1.2 判断input框架的内容不为空, 发送ajax请求, [POST /todos]接口
// 1.3 拿到数据后, 判断是否失败, 如果成功, 重新加载数据
$('#add').keyup((e) => {
  // console.log(e)
  // 如果按下的键是回车键
  if (e.keyCode === 13) {
    // 获取input框架的值
    var inputValue = $('#add').val()

    // 去掉首尾的空白字符
    if (inputValue.trim() === '') {
      alert('待办事项不能为空')
      return
    }

    // 发送ajax请求, 请求[POST /todos]接口
    $.ajax({
      type: 'POST',
      url: `${BASE_URL}/todos`,
      data: { content: inputValue },
      success: function (res) {
        // 清空输入框的数据
        $('#add').val('')

        const { code, message } = res
        if (code === 0) {
          // 重新获取列表
          getTodos()
        } else {
          alert(message)
        }
      },
    })
  }
})

// 修改待办
// 当点击文字时, 变成一个可以输入的框. 拿到之前的数据
$('.list').on('click', 'li', function () {
  // on---监听动态创建的元素的事件
  // console.log($(this).find('p').text())
  // console.log($(this).find('span').text())
  const content = $(this).find('p').text()//注!!!意:老师的写法更既注重与""获得所有待办"相联系,值得注意的是在此时li标签已经存在了,直接用里面的数据就好,不必向我那种,靠遍历出来的数据${item.content}
  const date = $(this).find('span').text()

  $(this).html(
    `<input type="text" value="${content}"/><span>${date}</span><a href="#">删除</a>`//这里和之前的写法不同,直接把整个li标签里面你的内容进行了替换
  )
})

// 阻止input的点击事件向上冒泡
$('.list').on('click', 'input', function (e) {
  e.stopPropagation()
})

/* //方法一
// 监听新创建的input框的回车事件
$('.list').on('keyup', 'input', function (e) {
  if (e.keyCode == 13) {
    // 判断当前输入框的值为空,trim()去掉首尾空格
    if ($(this).val().trim() === '') {
      alert('待办内容不能为空')
      return
    }

    const id = $(this).parent().attr('data-index')//li标签的data-index
    console.log(id)
    // 发送ajax请求
    $.ajax({
      type: 'PUT',
      url: `${BASE_URL}/todos/${id}`,
      data: { content: $(this).val() },
      success: function (res) {
        // 重新获取数据
        const { code, message } = res
        if (code === 0) {
          getTodos()//到目前为止没有把input标签再改为p标签,因为调用getTodos()后重新从数据库获取了数据
        } else {
          alert(message)
        }
      },
    })
  }
}) */
//方法二
$('.list').on('blur', 'input', function () {
  // 判断当前输入框的值为空
  if ($(this).val().trim() === '') {
    alert('待办内容不能为空')
    return
  }

  const id = $(this).parent().attr('data-index')
  console.log(id)
  // 发送ajax请求
  $.ajax({
    type: 'PUT',
    url: `${BASE_URL}/todos/${id}`,
    data: { content: $(this).val() },
    success: function (res) {
      // 重新获取数据
      const { code, message } = res
      if (code === 0) {
        getTodos()
      } else {
        alert(message)
      }
    },
  })
})

// 删除待办
$('.list').on('click', 'a', function (e) {
  // 阻止a元素向上冒泡
  e.stopPropagation()

  const id = $(this).parent().attr('data-index')

  $.ajax({
    type: 'DELETE',
    url: `${BASE_URL}/todos/${id}`,
    success: function (res) {
      const { code } = res
      if (code === 0) {
        getTodos()
      }
    },
  })
})
